<template>
<!-- Swiper -->
<div class="swiper-container">

  <div class="swiper-wrapper">
    <div
      class="swiper-slide"
      v-for="(item, index) in serviceArr"
      :key="index"
    >
      <div class="swiper-title">
        <i class="swiper-icon iconfont" :class="item.icon"></i>
        <span>{{item.title}}</span>
      </div>
      <p class="swiper-txt">{{item.txt}}</p>
    </div>
  </div>

  <div class="swiper-button-prev"><i class="el-icon-arrow-left"></i></div>
  <div class="swiper-button-next"><i class="el-icon-arrow-right"></i></div>
  <div class="swiper-pagination"></div>
  
</div>
</template>

<script>
export default {
  data() {
    return {
      serviceArr: [
        {icon: 'icon-shichang', title: '专业市场培训', txt: '提供专业市场人员对行业市场分析、谈判技巧进行培训'},
        {icon: 'icon-xiazai', title: '全景作品离线下载', txt: '提供全景作品离线下载到本地，支持无网体验'},
        {icon: 'icon-guzhangtixi', title: '行业解决方案', txt: '提供各重点行业VR全景行业解决方案，实现营销落地'},
        {icon: 'icon-disanfang', title: '第三方平台对接', txt: '提供携程、飞猪等第三方平台对接相关技术支持'},
        {icon: 'icon-24hours', title: '在线服务', txt: '提供7*24小时专属在线售前咨询、售后服务'},
        {icon: 'icon-anquan', title: '安全加密', txt: '提供HTTPS安全加密'},
        {icon: 'icon-ly_kuaisutongdao', title: '高速通道', txt: '提供全景作品上传/制作高速通道，服务器稳定支持'},
        {icon: 'icon-paishe', title: '全景拍摄培训', txt: '提供720°全景拍摄、全景航拍及制作技巧专业培训'},
      ],
    }
  },
  props: ['color'],
  mounted() {
    this.$nextTick(() => {
      var swiper = new Swiper('.swiper-container', {
        loop: true,
        speed: 500,
        slidesPerView: 3,
        spaceBetween: 24,
        centeredSlides: true,
        watchSlidesProgress: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      })
      
    })
  },
}
</script>

<style lang="stylus" scoped>
.swiper-container
  width: 100%
  height auto
  padding 35px 120px 56px
  margin-left auto
  margin-right auto
  .swiper-slide
    height 160px
    background-color #f2f2f2
    cursor pointer
    border-radius 4px
    padding 23px
    opacity 0
    transition opacity 0.8s
    &:hover
      background-color var(--themeColor)
      .swiper-title
        .swiper-icon
          color var(--themeColor)
          background #ffffff
        span
          color #ffffff
      p.swiper-txt
        color #ffffff
    .swiper-title
      height 48px
      line-height 48px
      display flex
      .swiper-icon
        display block
        width 48px
        height 48px
        color #fff
        text-align center
        font-size 32px
        background var(--themeColor)
        border-radius 50%
        overflow hidden
      span
        width calc(100% - 48px)
        text-align center
        font-size: 16px
        font-family PingFang SC
        font-weight 600
        color #000000
        padding-right 48px
    p.swiper-txt
      font-size 16px
      font-family PingFang SC
      font-weight 400
      color #000000
      line-height 22px
      margin-top 24px
  .swiper-slide.swiper-slide-prev
    opacity 1
  .swiper-slide.swiper-slide-active
    opacity 1
  .swiper-slide.swiper-slide-next
    opacity 1
  .swiper-button-prev
    left 0
    right auto
    width 40px
    height 40px
    background-color #ccc
    color #fff
    border-radius 50%
    padding 10px
    overflow hidden
    &:hover
      background-color #aaa
    i.el-icon-arrow-left
      color #fff
      font-size 24px
  .swiper-button-prev::after
    content '' !important
  .swiper-button-next
    left auto
    right 0
    width 40px
    height 40px
    background-color #ccc
    color #fff
    border-radius 50%
    padding 10px
    overflow hidden
    &:hover
      background-color #aaa
    i.el-icon-arrow-right
      color #fff
      font-size 24px
  .swiper-button-next::after
    content '' !important
</style>
<style lang="stylus">
.swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active
      background var(--themeColor)
</style>